<script type="text/javascript">
$(document).ready(function(){
	var month_arr = new Array('Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember');
/* Chart Trend */
	var trend_adapter = new $.jqx.dataAdapter({
		url: 'c_dashboard/get_trend',
		datatype: "json",
		datafields: [
			{ name: 'bulan'},
			{ name: 'data'}
		]
	});
	$('#trend_chart').jqxChart({
		title: "Laju Perkembangan Prestasi Secara Periodik",
		borderLineWidth: 1,
		showBorderLine : true,
		enableAnimations: true,
		description: "",
		showLegend: true,
		padding: { left: 10, top: 5, right: 10, bottom: 5 },
		titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
		source: trend_adapter,
		xAxis: {
			dataField: 'bulan',
			valuesOnTicks: false,
			axisSize: 'auto',
			formatFunction: function (value) {
				var ex = value.split('-');
				return month_arr[parseFloat(ex[0]) - 1] + ' ' + ex[1];
			}
		},
		seriesGroups: [{
			type: 'line',
			valueAxis:
			{
				description: '',
				axisSize: 'auto',
				minValue: 0
			},
			series: [
				{ dataField: 'data', displayText: 'Jumlah Prestasi', symbolType: 'round', colorFunction: function (){ return '#38ee00'; }}
			]
		}]
	});
/* End Chart Trend */
/* Start Chart Dispendik */
	var  sampleData = [
		{ sekolah:'SMKN 1', prestasi:100},
		{ sekolah:'SMKN 2', prestasi:80},
		{ sekolah:'SMKN 3', prestasi:70},
		{ sekolah:'SMKN 4', prestasi:60},
		{ sekolah:'SMKN 5', prestasi:55}
	];
	var chartdispendik_adapter = new $.jqx.dataAdapter({
		url: 'c_dashboard/get_best_school',
		datatype: "json",
		datafields: [
			{ name: 'sekolah_nama'},
			{ name: 'data'}
		]
	});
	var settings = {
		title: "10 Besar Sekolah dengan Prestasi Terbanyak",
		description: "",
		enableAnimations: true,
		showLegend: true,
		padding: { left: 5, top: 5, right: 5, bottom: 5 },
		titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
		source: chartdispendik_adapter,
		xAxis:
			{
				dataField: 'sekolah_nama',
				showGridLines: true
			},
		colorScheme: 'scheme01',
		seriesGroups:
			[
				{
					type: 'column',
					columnsGapPercent: 50,
					seriesGapPercent: 0,
					valueAxis:
					{
						displayValueAxis: true,
						minValue: 0,
						axisSize: 'auto',
						tickMarksColor: '#888888'
					},
					series: [
						{ dataField: 'data', displayText: 'Jumlah Prestasi'}
					]
				}
			]
	};
	$('#dispendik_chart').jqxChart(settings);
/* End Chart Dispendik */

/* Grid Dispendik */
	var dispendik_grid=$('#dispendik_grid');
    var source_dispendik_grid={
        url : 'index.php/c_dashboard/get_list',
        datatype : 'json',
        root : 'results',
		data : {search_text : ''},
        datafields : [
            { name : 'dashboard_id' },
            { name : 'sekolah_nama' },
            { name : 'prestasi_skor' },
            { name : 'prestasi_jumlah' }
        ],
        beforeprocessing : function(data){
            source_dispendik_grid.totalrecords = data[0].total;
        }
    }
    adapter_dispendik_grid = new $.jqx.dataAdapter(source_dispendik_grid);
    dispendik_grid.jqxGrid({
        source : adapter_dispendik_grid,
        width : '100%',
        theme : global_theme,
        pagesize : 15,
        pagesizeoptions : [15],
        sortable : true,
		pageable: true,
        filterable : true,
        columnsresize : true,
        autoheight : true,
        virtualmode : true,
        showtoolbar: true,
		rendertoolbar: function (toolbar) {
            var me = this;
            var container = $("<div style='margin: 5px;'></div>");
			container.append('Peringkat Prestasi Sekolah');
            toolbar.append(container);
        },
		editable: true,
		selectionmode: 'singlerow',
		editmode: 'selectedrow',
        rendergridrows : function(){
            return adapter_dispendik_grid.records;
        },
        columns : [
            { text : 'Nama Sekolah', dataField : 'sekolah_nama', columntype: 'textbox', width : '40%' },
            { text : 'Skor', dataField : 'prestasi_skor', width : '30%' },
            { text : 'Jumlah Prestasi', dataField : 'prestasi_jumlah', width : '30%' }
        ]
    });
/* End Grid Dispendik */
/* Grid Sekolah */
	var sekolah_grid=$('#sekolah_grid');
    var source_sekolah_grid={
        url : 'index.php/c_dashboard/get_list_sekolah_grid',
        datatype : 'json',
        root : 'results',
		data : {search_text : ''},
        datafields : [
            { name : 'increment' },
            { name : 'siswa_nama' },
            { name : 'siswa_kelas' },
            { name : 'prestasi_skor' },
            { name : 'prestasi_jumlah' }
        ],
        beforeprocessing : function(data){
            source_sekolah_grid.totalrecords = data[0].total;
        }
    }
    adapter_sekolah_grid = new $.jqx.dataAdapter(source_sekolah_grid);
    sekolah_grid.jqxGrid({
        source : adapter_sekolah_grid,
        width : '100%',
        theme : global_theme,
        pagesize : 15,
        pagesizeoptions : [15],
        sortable : true,
		pageable: true,
        filterable : true,
        columnsresize : true,
        autoheight : true,
        virtualmode : true,
        showtoolbar: true,
		rendertoolbar: function (toolbar) {
            var me = this;
            var container = $("<div style='margin: 5px;'></div>");
			container.append('Peringkat Prestasi Siswa');
            toolbar.append(container);
        },
		editable: true,
		selectionmode: 'singlerow',
		editmode: 'selectedrow',
        rendergridrows : function(){
            return adapter_sekolah_grid.records;
        },
        columns : [
            { text : 'No', dataField : 'increment', columntype: 'textbox', width : '10%'},
            { text : 'Nama Siswa', dataField : 'siswa_nama', columntype: 'textbox', width : '35%' },
            { text : 'Kelas', dataField : 'siswa_kelas', columntype: 'textbox', width : '15%' },
            { text : 'Skor', dataField : 'prestasi_skor', width : '15%' },
            { text : 'Jumlah Prestasi', dataField : 'prestasi_jumlah', width : '25%' }
        ]
    });
/* End Grid Sekolah */
/* Start Chart Sekolah */
		var  sampleData = [
			{ sekolah:'Si Fulan 1', prestasi:100},
			{ sekolah:'Si Fulan 2', prestasi:80},
			{ sekolah:'Si Fulan 3', prestasi:70},
			{ sekolah:'Si Fulan 4', prestasi:60},
			{ sekolah:'Si Fulan 5', prestasi:55}
		];
		var settings = {
			title: "10 Siswa dengan Prestasi Terbanyak",
			description: "",
			enableAnimations: true,
			showLegend: true,
			padding: { left: 5, top: 5, right: 5, bottom: 5 },
			titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
			source: sampleData,
			xAxis:
				{
					dataField: 'sekolah',
					showGridLines: true
				},
			colorScheme: 'scheme01',
			seriesGroups:
				[
					{
						type: 'column',
						columnsGapPercent: 50,
						seriesGapPercent: 0,
						valueAxis:
						{
							unitInterval: 10,
							minValue: 0,
							maxValue: 100,
							displayValueAxis: true,
							axisSize: 'auto',
							tickMarksColor: '#888888'
						},
						series: [
							{ dataField: 'prestasi', displayText: 'Jumlah Prestasi'}
						]
					}
				]
		};
		$('#sekolah_chart').jqxChart(settings);
/* End Chart Dispendik */
	<?php
		if($_SESSION[SESSION_USERGROUPID] !== 3 || $_SESSION[SESSION_USERGROUPID] !== 4){
	?>
		$('#sekolah_chart').hide();
		$('#sekolah_grid').hide();
	<?php
		}
	?>
});
</script>
<div>
	<div class="row">
		<div class="col-md-12">
			<div id='trend_chart' style="width:100%; height:250px; position: relative; left: 0px; top: 0px;"></div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<div id='dispendik_chart' style="width:100%; height:250px; position: relative; left: 0px; top: 0px;"></div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<div id="dispendik_grid"></div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<div id='sekolah_chart' style="width:100%; height:250px; position: relative; left: 0px; top: 0px;"></div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<div id="sekolah_grid"></div>
		</div>
	</div>
</div>